<template>
 
<div>
    <van-nav-bar left-arrow @click-left="onClickLeft" title="服务范围"/>
<div class="content">
    <div class="main">
    <div class="area">
        <li>
            <span></span>
            <p @click="one">深圳</p>
            <div class="mask" v-if="mask1">
                <li v-for="(item1,index) in list1" :key="index">{{item1}}</li>
            </div>
        </li>
        <li>
            <span></span>
            <p @click="two">成都</p>
            <div class="mask" v-if="mask2">
                <li v-for="(item1,index) in list2" :key="index">{{item1}}</li>
            </div>
        </li>
        <li>
            <span></span>
            <p @click="three">广州</p>
            <div class="mask" v-if="mask3">
                <li v-for="(item1,index) in list3" :key="index">{{item1}}</li>
            </div>
        </li>
        <li>
            <span></span>
            <p @click="four">杭州</p>
            <div class="mask" v-if="mask4">
                <li v-for="(item1,index) in list4" :key="index">{{item1}}</li>
            </div>
        </li>
        <li>
            <span></span>
            <p @click="five">武汉</p>
            <div class="mask" v-if="mask5">
                <li v-for="(item1,index) in list5" :key="index">{{item1}}</li>
            </div>
        </li>
    </div>
    </div>    
</div> 
</div>
</template>

<script>
export default {

      data(){
          return{
            list1:["南山区","福田区","宝安区","罗湖区","龙华区","龙岗区","盐田区",],
            list2:["金牛区","青羊区","锦江区","武侯区","高新区","成华区","天府新区","温江区","龙泉区","郫县","双流区"],
            list3:["天河区","越秀区","海珠区","番禺区","荔湾区","白云区","黄浦区",],
            list4:["渝中区","江北区","南岸区","九龙坡区","沙坪坝区","大渡口区","白碚区","渝北区","巴南区"],
            list5:["上城区","下城区","西湖区","拱野区","江干区","滨江区","萧山区",],
            mask1:false,
            mask2:false,
            mask3:false,
            mask4:false,
            mask5:false,
        }
      },
      methods:{
           onClickLeft(){
        this.$router.push("home")
    },
    one(){
        if(this.mask1){
            this.mask1 = false
        }else{
            this.mask1 = true
        }
      
    },
    two(){
        if(this.mask2){
            this.mask2 = false
        }else{
        this.mask2 = true
        }
    },
    three(){
        if(this.mask3){
            this.mask3 = false
        }else{
        this.mask3 = true
        }
    },
    four(){
        if(this.mask4){
            this.mask4 = false
        }else{
        this.mask4 = true
        }
    },
     five(){
        if(this.mask5){
            this.mask5 = false
        }else{
        this.mask5 = true
        }
    },
    }
  }
</script>

<style lang="less" scoped>
     li{
      list-style: none;
  }


 .van-nav-bar {
    background-color: #fff;
    color: #000;
    border: none;
    .van-nav-bar__title{
        color: #000;
        font-weight: 600;
    }
    .van-icon-arrow-left:before{
        color: #000;
    }
}
.content {
        background-color: #fff;
        height: 1000px;
        color: #fff;
        .main {
            width: 90%;
            margin: 0 auto;
            .left {
                span {
                 color: #fff;
                }
            }
            >div{
                padding-top: 10px;
                
                span {
                    color: #498859;
                    margin-left: 5px;
                    margin-top: 10px;
                }
                p{
                    margin: 0;
                    margin-top: 20px;
                    margin-left: 5px;
                }
            }
        }
        
}
.area {
            margin-top: 10px;
            border-radius: 15px;
            background-color: #fff;
            height: 1000px;
            color: #000;
            border: 2px solid #f6f6f6;
            >li{
                margin-left: 20px;
                span {
                    display: inline-block;
                    width: 4px;
                    height: 14px;
                    background-color: #f5d146;
                    
                }
                p{
                    display: inline-block;
                    font-size: 14px;
                }
            }
            .mask {
                li {
                    width: 95%;
                    height: 30px;
                    background-color: #f6f6f6;
                    line-height: 30px;
                    font-size: 14px;
                    text-indent:1em;
                    margin-top: 5px;
                }
            }
        }
</style>